<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
     <title>{{article.title}}-{{site.name}}</title>
  {{include './common/meta.html'}}
</head>

<body>
      <!-- 头部 -->
  {{include './common/header.html'}}

    <!-- 轮播图 -->
    <section class="row justify-center gap-10 mb-20">
        <div class="container pd-20">
           {{@ frag['product-banner']}}
        </div>
    </section>

    <!-- 内容 -->
    <section class="pb-20 justify-center row">
        <div class="w-1200 pb-20">
            <article>
             
                <div class="bg-fff pb-25 radius-6 list row">
                    <div class="tab-header product-menu">
                        <ul class="pt-10 pb-10">
                        {{each position[0].children}}
                            <li data-category="{{$value.pinyin}}"><a href="{{position[0].path}}/index.html#{{$value.pinyin}}">{{$value.name}}</a></li>
                            {{/each}}
                        </ul>
                    </div>

                    <div class="product-detail">
                        <h1 class="product-detail-title">{{article.title}}</h1>
                        <div class="product-detail-content">
                             {{@ article.content}}
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </section>

      <!-- footer -->
    {{include './common/footer.html'}}

    <!-- 返回顶部 -->
    {{include './common/backtop.html'}}

    {{include './common/js.html'}}

     <script>
       function initTabSwitcher(tabHeaderSelector, tabContentSelector) {
    const menu = document.querySelector(tabHeaderSelector);
    const tabContents = document.querySelectorAll(tabContentSelector + ' > .product-list');
    const menuItems = menu ? menu.querySelectorAll('li') : [];

    function showTab(category) {
        // 隐藏所有内容
        tabContents.forEach(tab => {
            tab.classList.add('none');
        });

        // 移除 active 类
        menuItems.forEach(item => {
            item.classList.remove('active');
        });

        // 显示目标内容
        const targetTab = document.querySelector(`${tabContentSelector} > .product-list[data-category="${category}"]`);
        if (targetTab) {
            targetTab.classList.remove('none');
        }

        // 设置当前菜单项为 active
        const activeMenuItem = menu.querySelector(`li[data-category="${category}"]`);
        if (activeMenuItem) {
            activeMenuItem.classList.add('active');
        }
    }

    function handleHashChange() {
        let hash = window.location.hash.replace('#', '');
        if (!hash) {
            const firstMenuItem = menu.querySelector('li[data-category]');
            if (firstMenuItem) {
                hash = firstMenuItem.getAttribute('data-category');
                window.location.hash = '#' + hash;
            }
        }

        if (hash) {
            showTab(hash);
        }
    }

    // menuItems.forEach(item => {
    //     item.addEventListener('click', function (e) {
    //         // e.preventDefault();
    //         const category = this.getAttribute('data-category');
    //         if (category) {
    //             window.location.hash = '#' + category;
    //         }
    //     });
    // });

    window.addEventListener('hashchange', handleHashChange);

    handleHashChange(); // 初始加载
}

// 调用初始化函数
initTabSwitcher('.tab-header.product-menu', '.tab-content.product-container');
    </script>
</body>

</html>